<template>
<div class="header">
  <div class="header-position head-height"></div>
  <div class="header-box head-height">
    <a-row class="wh row head-height">
      <nuxt-link to="/" class="header-logo" v-show="logo && logo.resUrl">
        <img class="logo" :src="logo.resUrl | setResUrl">
      </nuxt-link>
      <span class="header-info dis-show" >{{logo.resContent}}</span>
        <a-col class="header-nav noslt" :xs=24 :sm=24 :md=0 :lg=0 :xl=0>
          <a-icon style=" font-size:20px;" @click="navVisible = true" type="menu-fold" />
          <a-drawer class="nav-drawer" title="目 录" placement="right" @close="navVisible = false" :visible="navVisible">
            <nuxt-link :to="{name:item.channelName}" :class="{'nav-li-cur':channel==item.channelName}" v-for="item in nav" :key="item.id"  class="nav-li"><a-icon :type="item.channelName | setIcon" />{{item.channelTitle}}</nuxt-link>
          </a-drawer>      
        </a-col>
      <a-col class="header-nav noslt" :xs=0 :sm=0 :md=24 :lg=24 :xl=24>
        <nuxt-link :to="{name:item.channelName}" :class="{'nav-li-cur':channel==item.channelName}" v-for="item in nav" :key="item.id"  class="nav-li"><a-icon :type="item.channelName | setIcon" />{{item.channelTitle}}</nuxt-link>
      </a-col>
    </a-row>
  </div>
</div>
</template>
<script>
import api from "@/global/api";
export default {
  data() {
    return {
      channel:'',
      logo:'',
      nav:'',
      navVisible:false,
    }
  },
	watch:{
		$route(to, from){
			this.navVisible = false;
			this.channel =  this.$route.name;	
		}
	},
  async fetch() {
    this.channel =  this.$route.name;
    let {data:logo} = await this.$axios.get(api.getRes,{params:{resName:'logo'}});
    let {data:nav} = await this.$axios.get(api.getNav);
    var _nav = nav;
    _nav[1].channelName = 'list-page'
    this.nav = _nav;
    this.logo = logo;			
  },	
  filters: {
    setResUrl(val){
      return api.host+val;	
    },
    setIcon(val){
      var icon = '';
      switch (val) {
        case 'index':
          icon = 'home';
          break;
        case 'list-page':
          icon = 'unordered-list';
          break;
        case 'channel':
          icon = 'fire';
          break;
        case 'about':
          icon = 'question-circle';
          break;
        default:
        icon = 'home';
      } 
      return icon;
    }
  }
}
</script>

<style scoped>
.header-position{ width:100%; overflow:hidden;}
.header-box{ width:100%; z-index:99;  background:#fff; top:0; left:0; position:fixed;  box-shadow: 0 2px 6px 0 rgba(0,0,0,0.1);}
.header-main{height:80px;}
.header-logo .logo{ height:50px;}
.header-info{ margin:25px  0 0 20px; color:#999; font-size:16px;}
.header-nav{flex:1; height:55px; line-height:55px; text-align:right; font-size:16px;}
.nav-li{ cursor:pointer; margin-right:25px; font-size:16px; transition:color ease 0.2s;}
.nav-li i{ vertical-align:middle; margin:-3px 6px 0 0;}
.nav-li:hover{ color:#1296DB; transition:color ease 0.2s;}
.nav-li-cur{ color:#1296DB;transition:color ease 0.2s;}
.nav-drawer >>> .ant-drawer-body{ padding:0 15px;}
.nav-drawer .nav-li{ display:block; border-bottom:1px solid #E8E8E8; padding:10px 0;}
@media (max-width: 750px) {
.head-height{ height:65px;}	
.dis-show{ display:none;}
}
@media (min-width: 750px) {
.head-height{ height:80px;}	
.dis-show{ display:inline;}
}
</style>
